/* 
  等级列表
  author:zsy
  date: 2024-1-18
*/
<template>
  <div class="level-list">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="jrid" label="等级ID"> </el-table-column>
      <el-table-column prop="levelname" label="等级名称"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.row)"
            type="text"
            size="small"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
//导包接口 作为gettLevel方法在下方使用
import { getLevel } from "@/api/level";
import { delLevel } from "@/api/level";

export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    /* 获取等级列表  用箭头函数完成对上方getLevel导包的方法的'声明'*/
    getLevelList() {
      getLevel().then((res) => {
        this.tableData = res.data; //直接把res.data赋值给数组tableData
      });
    },

    deleteRow(row) {
      delLevel({
        levelid: row.jrid,
      })
        .then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getLevelList();
        })
        .catch(() => {
          this.$message({
            message: "删除失败",
            type: "warning",
          });
        })
        
    },
  },
  //完成 接口的调用 通过调用上方箭头函数的getLevelList 成功把接口里的内容调用在本程序中
  created() {
    this.getLevelList();
  },
};
</script>

<style scoped>
.level-list {
  width: 60%;
  margin: 100px auto 0;
}
</style>
